import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styles from './index.less';
var timer = null;
/*tab*/
class TabsV1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeIndex: this.props.active,
    };
  }

  componentDidMount() {}

  componentWillReceiveProps(nextProps) {
    let _index = 0;
    this.setState(
      {
        activeIndex: nextProps.active,
      },
      () => {
        if (timer) {
          return false;
        }
        timer = setInterval(() => {
          if (_index >= nextProps.list.length - 1) {
            _index = -1;
          }
          _index = _index + 1;
          this.changeTab(_index);
        }, 30000);
      },
    );
  }
  componentWillUnmount() {
    clearInterval(timer);
  }
  changeTab(i) {
    this.setState(
      {
        activeIndex: i,
      },
      () => {
        this.props.changeTabHandle && this.props.changeTabHandle(i);
      },
    );
  }
  render() {
    return (
      <div className={styles.tabv1}>
        <div className={styles.tabslist}>
          {this.props.list.map((item, i) => {
            return (
              <span
                className={
                  i == this.state.activeIndex ? styles.active_span : ''
                }
                key={`tabsv1_${i}`}
                style={{
                  height: this.props.height + 'px',
                  lineHeight: this.props.height + 'px',
                }}
                onClick={this.changeTab.bind(this, i)}
              >
                {item}
              </span>
            );
          })}
        </div>
      </div>
    );
  }
}

TabsV1.propTypes = {
  list: PropTypes.array, //[{label:'',value:''}]
  active: PropTypes.number, //激活索引
  changeTabHandle: PropTypes.func, //
  height: PropTypes.number,
};

TabsV1.defaultProps = {
  list: ['tab1', 'tab2', 'tab3', 'tab4', 'tab4', 'tab4', 'tab4'],
  active: 1,
  height: 40,
  changeTabHandle: () => {},
};

export default TabsV1;
